<template>
	<gracePage headerBG="#fff">
		<!-- 自定义头部导航 -->
		<view slot="gHeader" class="grace-header-body">
			<!-- <view > -->
			<graceSearch background="#f1f1f1" placeholder="请输入搜索内容" class="search" @inputting="inputting" @confirm="confirm"></graceSearch>
			<!-- </view> -->
		</view>
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- ------------------------------------活动------------------------------------------------------- -->

			<view class="top_fixed">
				<view class="grace-list-items">
					<!-- <text class="grace-list-icon grace-icons icon-comments grace-blue"></text> -->
					<view class="grace-list-body grace-border-b">
						<view class="grace-list-title">
							<text class="grace-list-title-text">活动</text>
							<text class="grace-list-title-desc">全部活动</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>

				<!-- ------------------------------------通知------------------------------------------------------- -->
				<view class="speaker">
					<graceSpeaker height="83rpx" :vertical="true" iconColor="#E76B61" :interval="5000" iconClass="grace-icons icon-speaker"
					 :msgs="params.speakerMsgs"></graceSpeaker>
				</view>
				<!-- ------------------------------------推荐/收藏------------------------------------------------------- -->
				<graceNavBar activeLineWidth="40px" :items="params.navItems" textAlign="center" activeDirection="center"
				 :currentIndex="params.navIndex" @change="navChange"></graceNavBar>
			</view>
			<view style="margin-top: 200upx;"></view>
			<view class="content_box">
				<!-- ------------------------------------瀑布流------------------------------------------------------ -->
				<view class="grace-space-between">
					<view class="grace-waterfall-item" v-for="(lists, index1) in params.productList" :key="index1">
						<view class="grace-img-card-item" v-for="(products, index2) in lists" :key="index2">
							<image :src="products.img" mode="widthFix" ></image>
							<text class="grace-img-card-title">标题文字</text>
							<view class="grace-img-card-more">
								<text class="grace-img-card-price">￥99.99</text>
								<text class="grace-img-card-btn">按钮</text>
							</view>
						</view>
					</view>
				</view>
				<graceLoading :loadingType="params.loadingType"></graceLoading>
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceSearch from "../../graceUI/components/graceSearch.vue";
	import graceSpeaker from "../../graceUI/components/graceSpeaker.vue";
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	var dataObj = require('../../graceUI/demoData/data.js');
	var products = dataObj.products;
	var page = 1;
	export default {
		data() {
			return {
				params: {
					navItems: ['推荐', '收藏'],
					navIndex: 0,
					loadingType: 3,
					productList: [
						[],
						[]
					],
					speakerMsgs: [{
							title: "“繁花似锦五月天 百万现金放肆领”活动公告",
							url: "../index/index",
							opentype: "navigate"
						},
						{
							title: "Hcoder.net - 精品 IT 课程中心",
							url: "../index/index",
							opentype: "switchTab"
						}
					]
				}
			}
		},
		onLoad: function(options) {
			this.getList();
		},
		//上拉加载更多
		onReachBottom: function() {
			this.getList();
		},
		methods: {
			inputting: function(e) {
				console.log(e);
			},
			confirm: function(e) {
				console.log(e);
			},
			navChange: function(index) {
				this.params.navIndex = index;
			},
			getList: function() {
				//避免重复加载
				if (this.params.loadingType != 3) {
					return;
				}
				//最后一页判断
				if (page > 3) {
					this.params.loadingType = 2;
					return;
				}
				this.params.loadingType = 1;
				//模拟api请求延迟关闭 Loading
				setTimeout(() => {
					var lArr = this.params.productList[0];
					var rArr = this.params.productList[1];
					//填充数组[此处的 products 数据应该来自与api接口数据]
					//数据格式见 "/data/data.js"
					products = dataObj.getArrRandomly(products); //打乱排序【模拟api】
					for (var i = 0; i < products.length; i++) {
						if (i % 2 == 0) {
							lArr.push(products[i]);
						} else {
							rArr.push(products[i]);
						}
					}
					this.params.productList = [lArr, rArr];
					this.params.loadingType = 3;
					page++;
				}, 1000);
			}
		},
		components: {
			gracePage,
			graceSearch,
			graceSpeaker,
			graceNavBar
		}
	}
</script>
<style lang="less" scoped>
	.grace-header-body {
		background-color: #fff;
	}

	.search {
		width: 80%;
		margin: 0 30rpx;

		.gui-search {
			background: #f1f1f1;
		}
	}

	.grace-list-body {
		padding: 10rpx 0;
	}

	.grace-list-items {
		background: #fff;
	}

	.speaker {
		background: #fff;
		padding: 0 30rpx;
	}

	.grace-space-between {
		image{
			width: 100%;
		}
		.grace-waterfall-item:nth-child(1){
			.grace-img-card-item {
				width: 47vw;
				margin: 2vw;
				
			}
		}
		.grace-waterfall-item:nth-child(2){
			.grace-img-card-item {
				width: 47vw;
				margin: 2vw 2vw 2vw 0;
			}
		}
	}
	
	.top_fixed{
		position: fixed;
		top: 1;
		z-index: 1;
		background-color: #fff;
		width: 100vw;
	}
	.content_box{
		
	}
</style>
